<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/dev/plugins/layui/layui/css/layui.css" rel="stylesheet">
</head>
<body style="background-color: #acceff;width: 600px;height: 535px;margin: 10px;" >
<div id="app" style="position: relative;">
    <div style="display: inline-block;position: absolute;top: 20px">
        <div class="layui-upload-list">
            <img :src="avatar" class="layui-upload-img" id="ID-upload-demo-img" style="width: 100px; height: 100px; border-radius: 50%">
            <div id="ID-upload-demo-text"></div>
        </div>
        <button type="button" style="border: none;background: #b7ccba;border-radius: 3px;padding: 5px" id="ID-upload-demo-btn">
            <i class="layui-icon layui-icon-upload"></i> 上传新头像
        </button>
    </div>
    <div style="width: 500px;position: absolute;left: 100px;top: 20px;">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" :value=jsName name="username" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <input type="number" :value=jsTelephone name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="password" :value=jsCipher name="password" lay-verify="required|pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
                </div>
                <div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" :value=jsEmail lay-verify="email" placeholder="请输入邮箱（选填）" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-inline layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="date" :value=birthday id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked>
                    <input type="radio" name="sex" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">出生地</label>
                <div class="layui-input-block">
                    <textarea name="brithplace" placeholder="请输入内容" class="layui-textarea">{{brithplace}}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">提交更改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                </div>
            </div>
        </form>
    </div>
</div>




<script src="/dev/plugins/jquery/jquery.min.js"></script>
<script src="/dev/plugins/layui/layui/layui.js"></script>
<script src="/dev/plugins/vue/vue.js"></script>
<script src="/dev/plugins/vue/axios.min.js"></script>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            jsName: "",
            jsTelephone: "",
            jsCipher: "",
            jsEmail: "",
            birthday: "",
            jsSex: "",
            brithplace: "",
            avatar: ""
        },
        mounted() { // 将 mounted 修改为一个方法
            this.findId(); // 调用方法
        },
        methods: {
            findId() {
                axios.post(`/dev/jobSeeker/findByIdNew/${localStorage.getItem("id")}`, {
                    headers: {
                        "id": localStorage.getItem("id"),
                        "token": localStorage.getItem("token")
                    }
                })
                    .then(result => {
                        let data = result.data.data;
                        console.log(data)
                        this.jsName = data.jsName; // 使用 this 代替 vue.$data
                        this.jsTelephone = data.jsTelephone;
                        this.jsCipher = data.jsCipher;
                        this.jsEmail = data.jsEmail;
                        this.birthday = data.birthday;
                        this.jsSex = data.jsSex;
                        this.brithplace = data.brithplace;
                        this.avatar = data.avatar;
                        // 处理响应数据
                    })
                    .catch(error => {
                        // 处理错误情况
                        console.log(error)
                    });
            },
            amend(username,phone,password,email,birthday,sex,brithplace){
                axios.post(`/dev/jobSeeker/amendJs`,{
                    username: username,
                    phone: phone,
                    password: password,
                    email: email,
                    birthday: birthday, // 生日需要以字符串格式传递
                    sex: sex, // 或者为 '女'
                    birthplace: brithplace===""?null:brithplace
                },{
                    headers:{
                        "id":localStorage.getItem("id"),
                        "token":localStorage.getItem("token")
                    }
                })
                    .then(result => {

                    })
                    .catch(error => {

                    })
            },
            amendAvatar(){

            }
        }
    });

    layui.use(['form', 'laydate', 'util'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;

        // 自定义验证规则
        form.verify({
            pass: function(value) {
                if (!/(.+){6,16}$/.test(value)) {
                    return '密码必须 6 到 16 位';
                }
            }
        });

        // 提交事件
        form.on('submit(demo1)', function(data){
            var field = data.field; // 获取表单字段值
            console.log(field)
            vue.amend(field.username,field.phone,field.password,field.email,field.date,field.sex,field.brithplace)
            // layui.layer.close(ifr)
            // window.open("/dev/views/job/page/myuserinfo.html")
            // 此处可执行 Ajax 等操作
            // …
            layer.msg('提交成功', {
                icon: 1, // 成功的图标
                time: 2000, // 显示时间，单位为毫秒
                shade: 0, // 遮罩透明度
                shadeClose: true // 点击遮罩关闭提示层
            });
            return false; // 阻止默认 form 跳转
        });

        // 日期
        laydate.render({
            elem: '#date',
            max: new Date().getTime()
        });

    });


    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: `/dev/jobSeeker/uploadImage/${localStorage.getItem("id")}`, // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                // element.progress('filter-demo', '0%'); // 进度条复位
                // layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            // error: function(){
            //     // 演示失败状态，并实现重传
            //     var demoText = $('#ID-upload-demo-text');
            //     demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            //     demoText.find('.demo-reload').on('click', function(){
            //         uploadInst.upload();
            //     });
            // }

        });
    });
</script>
</body>
</html>